<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>TinyJSX Router Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=yes" />
    <script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx.min.js"></script>
    <script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx-dom.min.js"></script>
    <script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx-router.min.js"></script>
    <script type="text/javascript">
      document.onreadystatechange = function () {
        if (document.readyState === 'complete') {
          const { createElement } = TinyJSX;
          const { render } = TinyJSXDom;
          const { Link, Route, Switch, default: Router } = TinyJSXRouter;

          function Routes() {
            return [
              createElement('nav', {}, [
                createElement(Link, { to: '/tiny-jsx/examples/router-umd/' }, 'Home'),
                createElement(Link, { to: '/tiny-jsx/examples/router-umd/page1' }, 'Page 1'),
                createElement(Link, { to: '/tiny-jsx/examples/router-umd/page2' }, 'Page 2'),
              ]),
              createElement(Switch, {}, [
                createElement(Route, { path: '/tiny-jsx/examples/router-umd/' }, createElement('div', {}, 'Home')),
                createElement(Route, { path: '/tiny-jsx/examples/router-umd/page1' }, createElement('div', {}, 'Page 1')),
                createElement(Route, { path: '/tiny-jsx/examples/router-umd/page2' }, createElement('div', {}, 'Page 2')),
              ]),
            ];
          }

          render(createElement(Router, {}, createElement(Routes)), document.body);
        }
      }
    </script>
</head>
<body></body>
</html>
